<template>
    <div class="container">
        <div class="form-wrapper">
            <div class="header">
                login
            </div>
            <div class="input-wrapper">
                <div class="border-wrapper">
                    <input type="text" name="username" placeholder="username" class="border-item">
                </div>
                <div class="border-wrapper">
                    <input type="password" name="password" placeholder="password" class="border-item">
                </div>
            </div>
            <div class="action">
                <div class="btn">login</div>
            </div>
            <div class="icon-wrapper">
                <i class="iconfont icon-icon-test"></i>
                <i class="iconfont icon-icon-test"></i>
                <i class="iconfont icon-icon-test"></i>
            </div>
        </div>
    </div>
</template>
<script>
    import BaseHeader from '../../components/BaseHeader/BaseHeader'
    // import BaseFooter from '../../components/BaseFooter/BaseFooter'
    export default {
        name: "portal-web",
        data(){
            return{

            }
        },
        methods:{

        },
        created(){},
        components:{
        },
        mounted(){
        },
        watch:{
            '$route':{
                handler(to, from){
                    console.log(`here is portal-web.vue`);
                    console.log('num', this.num++);
                    this.currentRoute = to.name;
                    //处理路由变化
                    console.log('to', to)
                    console.log('from', from)
                },
                deep:true,
            },
        },
        beforeDestroy(){

        },
        destroyed(){}
    }
</script>


<style lang="less" scoped>
@import '//at.alicdn.com/t/font_2102636_no4t35af4k.css';
* {
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
}

.container {
    height: 100%;
    font-family: 'JetBrains Mono Medium';
    // width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0e92b3;
}

.form-wrapper {
    width: 300px;
    background-color: rgb(41,45,62);
    color: #fff;
    border-radius: 2px;
    padding: 50px;
    // box-sizing: border-box;
}

.form-wrapper .header {
    text-align: center;
    font-size: 35px;
    text-transform: uppercase;
    line-height: 100px;
}

.form-wrapper .input-wrapper input {
    background-color: rgb(41, 45, 62);
    border: 0;
    width: 100%;
    text-align: center;
    font-size: 15px;
    color: #fff;
    outline: none;
}

.form-wrapper .input-wrapper input::placeholder {
    text-transform: uppercase;
}

.form-wrapper .input-wrapper .border-wrapper {
    background-image: linear-gradient(to right, #e8198b, #0eb4dd);
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-wrapper .input-wrapper .border-wrapper .border-item {
    height: calc(100% - 0.004rem);
    width: calc(100% - 0.004rem);
    border-radius: 0.03rem;
}

.form-wrapper .action {
    display: flex;
    justify-content: center;
}

.form-wrapper .action .btn {
    width: 60%;
    text-transform: uppercase;
    border: 2px solid #0e92b3;
    text-align: center;
    line-height: 50px;
    border-radius: 30px;
    cursor: pointer;
}

.form-wrapper .action .btn:hover {
    background-color: #0e92b3;
}

.form-wrapper .icon-wrapper {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 1px dashed rgb(146, 146, 146);
    padding: 20px;
}

.form-wrapper .icon-wrapper i {
    font-size: 20px;
    color: rgb(187, 187, 187);
    cursor: pointer;
    border: 1px solid #fff;
    padding: 5px;
    border-radius: 20px;

}


</style>